<template>

	<view class="bruce" id="conent">
		<ul class="bubble-bgwall">
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
		</ul>
		<view class="toptitle" @click="home">
			智能农业监控系统
		</view>
		<view class="showcontent">
			<view class="introduction">
				<scroll-view id="scrollview" scroll-y>
					<h2>系统简介</h2>
					<p><span>基于物联网的智能农业监控系统是一套集成现代物联网技术、微信小程序、网页后台以及人工智能（AI）技术的综合性农业管理系统。该系统旨在实现对农作物生长环境的全面监控、历史数据的可视化分析、精准种植决策以及终端设备的远程控制，从而提升农业生产的效率与品质。</span>
					</p>

					<image
						src="http://eb118-file.cdn.bcebos.com/upload/c53d3659625943df9d940058b977346b_1525109737.png?">
					</image>

					<h2>系统架构与功能</h2>

					<h3>本系统主要由物联网设备层、云平台层、应用层三部分构成。</h3>

					<h3>物联网设备层：</h3>
					<p><span>包含若干个节点模块和一个协调器模块。节点模块负责采集农作物生长环境的关键数据，如环境温度、湿度、气压以及土壤温度、湿度等，并将这些数据通过无线传输方式发送至协调器模块。协调器模块则负责数据的汇总与上传，确保数据能够实时、准确地传输至云平台。</span>
					</p>

					<h3>云平台层：</h3>
					<p><span>作为数据的中转站，云平台接收来自物联网设备层的数据，并进行存储、处理与分析。同时，云平台提供数据接口，供微信小程序和网页后台调用，实现数据的实时展示与历史查询。</span></p>

					<h3>应用层：包括微信小程序和网页后台两部分。</h3>

					<h3>微信小程序：</h3>
					<p><span>用户可通过微信小程序随时随地查看当前农作物的生长环境数据，了解农作物的实时生长状况。微信小程序界面简洁直观，操作便捷，为用户提供良好的使用体验。</span></p>
					<h3>网页后台：</h3>
					<p><span>网页后台为农业管理者提供更丰富的数据分析功能。管理员可通过网页后台查看各种历史数据，利用折线图、曲线图等图表方式直观地展现数据的变化趋势。此外，网页后台还支持数据的导出与报表生成，方便管理者进行数据分析和决策。</span>
					</p>
					<h2>AI技术应用</h2>
					<p><span>本系统结合AI技术对云平台的数据进行深度分析和预测。通过对大量历史数据的学习与挖掘，AI模型能够实现对农作物生长环境的精准预测，为农业管理者提供科学的种植决策依据。同时，AI技术还可用于智能灌溉、水肥管理等环节，实现农业生产的精准化、智能化。</span>
					</p>

					<h2>远程控制功能</h2>

					<p>
						<span>
							本系统具备对终端节点的远程控制功能。用户可通过微信小程序或网页后台远程控制水泵、风扇、灯光等设备的开启与关闭，实现对农作物生长环境的远程调控。这一功能不仅提高了农业生产的便捷性，还有助于降低人力成本，提高生产效率。
						</span>
					</p>

					<p><span>综上所述，基于物联网的智能农业监控系统是一套功能强大、操作便捷的农业管理系统。通过集成物联网技术、微信小程序、网页后台以及AI技术，该系统为农业生产提供了全面的监控、分析与决策支持，有助于推动农业生产的智能化、精准化进程。</span>
					</p>
				</scroll-view>
			</view>
		</view>
		<view class="righttop">
			<span @click="LoginRegister">登录</span> /<span @click="LoginRegister">注册</span>
		</view>
		<view class="winfroted-glass">
			<ul class="nav1">
				<li class="title1" @click="home">系统简介</li>
				<li class="title1" @click="LoginRegister">进入系统</li>
				<li class="title1" @click="relatedTechnologies">相关技术</li>
				<li class="title1" @click="InsiteCommunity">进入社区</li>
				<li class="title1" @click="teamSpirit">团队风采</li>
				<li class="title1" @click="aboutUs">关于我们</li>
			</ul>
		</view>
		<view class="frosted-glass" v-if="introduction">
			<ul class="nav" ref="myDiv">
				<li class="title" id="title" @click="onintroduction">系统简介</li>
				<li class="title" id="title" @click="LoginRegister">进入系统</li>
				<li class="title" id="title" @click="relatedTechnologies">相关技术</li>
				<li class="title" id="title" @click="aboutUs">关于我们</li>
				<li class="title" id="button" @click="theme">{{title}}</li>
			</ul>
		</view>
		<view class="andshowcontent" v-if="andintroduction">
			<view class="andintroduction">
				<scroll-view id="andscrollview" scroll-y>
					<h2>系统简介</h2>
					<p><span>基于物联网的智能农业监控系统是一套集成现代物联网技术、微信小程序、网页后台以及人工智能（AI）技术的综合性农业管理系统。该系统旨在实现对农作物生长环境的全面监控、历史数据的可视化分析、精准种植决策以及终端设备的远程控制，从而提升农业生产的效率与品质。</span>
					</p>

					<image
						src="http://eb118-file.cdn.bcebos.com/upload/c53d3659625943df9d940058b977346b_1525109737.png?">
					</image>

					<h2>系统架构与功能</h2>

					<h3>本系统主要由物联网设备层、云平台层、应用层三部分构成。</h3>

					<h3>物联网设备层：</h3>
					<p><span>包含若干个节点模块和一个协调器模块。节点模块负责采集农作物生长环境的关键数据，如环境温度、湿度、气压以及土壤温度、湿度等，并将这些数据通过无线传输方式发送至协调器模块。协调器模块则负责数据的汇总与上传，确保数据能够实时、准确地传输至云平台。</span>
					</p>

					<h4>云平台层：</h4>
					<p><span>作为数据的中转站，云平台接收来自物联网设备层的数据，并进行存储、处理与分析。同时，云平台提供数据接口，供微信小程序和网页后台调用，实现数据的实时展示与历史查询。</span></p>

					<h4>应用层：包括微信小程序和网页后台两部分。</h4>

					<h3>微信小程序：</h3>
					<p><span>用户可通过微信小程序随时随地查看当前农作物的生长环境数据，了解农作物的实时生长状况。微信小程序界面简洁直观，操作便捷，为用户提供良好的使用体验。</span></p>
					<h3>网页后台：</h3>
					<p><span>网页后台为农业管理者提供更丰富的数据分析功能。管理员可通过网页后台查看各种历史数据，利用折线图、曲线图等图表方式直观地展现数据的变化趋势。此外，网页后台还支持数据的导出与报表生成，方便管理者进行数据分析和决策。</span>
					</p>
					<h2>AI技术应用</h2>
					<p><span>本系统结合AI技术对云平台的数据进行深度分析和预测。通过对大量历史数据的学习与挖掘，AI模型能够实现对农作物生长环境的精准预测，为农业管理者提供科学的种植决策依据。同时，AI技术还可用于智能灌溉、水肥管理等环节，实现农业生产的精准化、智能化。</span>
					</p>

					<h2>远程控制功能</h2>

					<p>
						<span>
							本系统具备对终端节点的远程控制功能。用户可通过微信小程序或网页后台远程控制水泵、风扇、灯光等设备的开启与关闭，实现对农作物生长环境的远程调控。这一功能不仅提高了农业生产的便捷性，还有助于降低人力成本，提高生产效率。
						</span>
					</p>

					<p><span>综上所述，基于物联网的智能农业监控系统是一套功能强大、操作便捷的农业管理系统。通过集成物联网技术、微信小程序、网页后台以及AI技术，该系统为农业生产提供了全面的监控、分析与决策支持，有助于推动农业生产的智能化、精准化进程。</span>
					</p>
				</scroll-view>
			</view>
			<view class="top" @click="onintroduction">
				<image class="pic" src="../../static/top.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				button: true,
				title: "夜间模式",
				cssid: "0",
				introduction: true,
				andintroduction: false
			};
		},
		onLoad() {
			console.log("%c    _                     _                 _   ", "color: #00a1d6;");
			console.log("%c   | |    _  _     ___   | |_     __ _     (_)   ", "color: #00a1d6;");
			console.log("%c   | |   | +| |   / _ \\  | ' \\   / _` |    | |   ", "color: #00a1d6;");
			console.log("%c  _|_|_   \\_,_|   \\___/  |_||_|  \\__,_|   _|_|_  ", "color: #00a1d6;");
			console.log("%c" + `_|"""""|_|"""""|_|"""""|_|"""""|_|"""""|_|"""""| `, "color: #00a1d6;");

		},
		mounted() {},

		methods: {
			teamSpirit() {
				uni.reLaunch({
					url: '/pages/teamSpirit/teamSpirit?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			InsiteCommunity() {
				uni.navigateTo({
					url: '/pages/InsiteCommunity/InsiteCommunity?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			relatedTechnologies() {
				uni.navigateTo({
					url: '/pages/relatedTechnologies/relatedTechnologies?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs/aboutUs?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			onintroduction(e) {
				this.andintroduction = !this.andintroduction;
				this.introduction = !this.introduction;
				// this.showdraw()
			},
			showdraw() {
				this.$nextTick(() => {
					//用ref调用DOM元素确保myDiv存在
					const myDiv = this.$refs.myDiv;
					if (myDiv) {
						myDiv.style.left = '-10.5vw';
					} else {
						console.error('myDiv元素不存在！');
					}
				});
			},
			home() {
				uni.navigateTo({
					url: '/pages/home/home',
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			LoginRegister(e) {
				let userid = uni.getStorageSync('userid')
				if (userid !== '') {
					uni.navigateTo({
						url: '/pages/Deviceinformation/Deviceinformation?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
					})
				} else {
					uni.navigateTo({
						url: '/pages/LoginRegister/LoginRegister?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
					})
				}
			},
			theme(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				let button = this.button;

				if (button) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}

		},
	}
</script>

<style lang="scss">
	@media screen and (min-width: 640px) {
		#conent {
			background: #030812;

			.frosted-glass {
				display: none;
			}

			.andshowcontent {
				.andintroduction {
					display: none;
				}
			}

			.toptitle {
				position: fixed;
				margin-left: 5px;
				width: 100%;
				padding: 20px;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				left: 0;
				display: block;
				background: #393d49;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				background-repeat: no-repeat;
				background-size: 100vw;
			}

			.righttop {
				position: fixed;
				margin-left: 5px;
				width: 50%;
				padding: 20px 40px 20px 0;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				right: 0;
				display: block;
				text-align: right;
				background: transparent;

				span {
					&:hover {
						color: #009688;
					}
				}
			}

			.showcontent {
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
				display: block;
				justify-content: center;
				position: fixed;
				left: 0;
				margin: 0 50px 0 50px;
				width: 100%;
				height: 100%;
				backdrop-filter: blur(3px);

				.introduction {
					background-color: rgba(0, 0, 0, 0.126);
					display: block;
					overflow: hidden;
					box-sizing: border-box;
					position: relative;
					margin-top: 120px;
					margin-left: 120px;
					margin-right: 100px;
					padding: 20px;
					border-radius: 5px;

					#scrollview {
						width: 100%;
						height: 80vh;
						background-color: transparent;

						h2,
						h3 {
							color: #111111;
							padding: 5px;
						}

						p {
							color: #eee;
							line-height: 35px;
							text-indent: 2em;
							font-size: 18px;

							span {
								padding: 5px;
								background-image: linear-gradient(to right, #171f1f, #002622);
								background-repeat: no-repeat;
								background-size: 0% 2px;
								background-position: left bottom;
								transition: background-size 1s;

								&:hover {
									background-size: 100% 2px;
								}
							}

						}

						image {
							display: block;
							width: 375px;
							height: 375px;
							border-radius: 5px;
							margin: 5px auto;
							background-position: center center;
							background-size: cover;
						}
					}


				}

			}

			.winfroted-glass {
				background-color: transparent;
				z-index: 10;
				width: 140px;
				display: flex;
				position: fixed;
				left: 0px;
				top: 10px;

				.nav1 {
					margin-top: 30px;
					width: 120px;
					height: 100vh;
					background-color: #393d49;
					position: relative;
					display: block;
					margin-left: 5px;
					box-sizing: border-box;
					padding: 50px 0 0 0;
					border-left: 5px solid #222e6f;
					justify-content: center;
					text-align: center;

					.title1 {
						width: 100%;
						margin: 10px auto;
						padding: 10px 0;
						list-style: none;
						text-align: center;
						color: #d8d8d8;
						transition: background-color 0.3s ease;

						&:hover {
							background: #009688;
							border-right: #ffffff 2px solid;
							cursor: pointer;
						}
					}
				}


			}
		}
	}

	.bruce {
		background-image: linear-gradient(270deg, #819cad, #81a5bd);
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.winfroted-glass {
			display: none;
		}

		.toptitle {
			display: none;
		}

		.showcontent {
			.introduction {
				display: none;
			}
		}

		.righttop {
			display: none;
		}

		.frosted-glass {
			box-sizing: border-box;
			overflow: hidden;
			position: fixed;
			display: flex;
			top: 20vh;
			align-items: center;
			width: 72vw;
			height: 60vh;
			border-radius: 1%;
			box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(10px);
			transition: 0.5s ease;
			animation: code 2s;


			.nav {
				width: 100%;
				position: fixed;
				display: grid;
				padding: 0px;
				grid-template-columns: repeat(1, 1fr);
				justify-items: center;
				margin: auto;
				justify-content: center;
				align-items: center;

				.title {
					padding: 20rpx;
					margin: 15rpx auto;
					width: 240rpx;
					font-size: 36rpx;
					font-family: "楷体", sans-serif;
					font-weight: bold;
					box-sizing: border-box;
					position: relative;
					justify-content: center;
					text-align: center;
					list-style: none;
					background-color: rgba(1, 1, 1, 0.126);
					border-radius: 3%;
					color: rgb(237, 252, 252);
					border: solid 2px rgba(143, 163, 191, 0.5);
					box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);

					&:hover {
						background-color: rgba(194, 252, 252, .13);
						box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
					}

				}

			}


			&:hover {
				box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
			}
		}

		.andshowcontent {
			z-index: 10;
			display: block;
			justify-content: center;
			position: fixed;
			margin: 0 50px 0 50px;
			width: 100%;
			height: 100%;

			.andintroduction {
				background-color: rgba(0, 0, 0, 0.626);
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				position: relative;
				margin-top: 30px;
				margin-left: 10px;
				margin-right: 10px;
				padding: 10px;
				border-radius: 5px;

				#andscrollview {
					width: 100%;
					height: 90vh;
					color: #eaeaea;
					font-size: 18px;
					background-color: transparent;

					h2,
					h3 {
						color: #eaeaea;
						padding: 5px;
					}

					p {
						color: #dfdfdf;
						line-height: 35px;
						text-indent: 2em;
						font-size: 16px;

						span {
							padding: 5px;
							background-image: linear-gradient(to right, #171f1f, #002622);
							background-repeat: no-repeat;
							background-size: 0% 2px;
							background-position: left bottom;
							transition: background-size 1s;

							&:hover {
								background-size: 100% 2px;
							}
						}

					}

					image {
						display: block;
						width: 85vw;
						height: 45vh;
						border-radius: 5px;
						margin: 5px auto;
						background-position: center center;
						background-size: cover;
					}

				}
			}

			.top {
				display: block;
				position: relative;
				bottom: 150px;
				width: 50px;
				height: 50px;
				right: 0;
				padding: 10px;
				float: right;
				background-color: #009688;
				overflow: hidden;
				border-radius: 50%;
				box-sizing: border-box;

				.pic {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.bubble-bgwall {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bubble {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.15);
		color: #44397a;
		animation: bubble 15s infinite;
	}

	.bubble:nth-child(1) {
		left: 10%;
	}

	.bubble:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-duration: 7s;
		animation-delay: 2s;
	}

	.bubble:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bubble:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.3);
		animation-duration: 8s;
	}

	.bubble:nth-child(5) {
		left: 70%;
	}

	.bubble:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		background-color: rgba(255, 255, 255, 0.2);
		animation-delay: 3s;
	}

	.bubble:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bubble:nth-child(8) {
		left: 55%;
		width: 40px;
		height: 40px;
		font-size: 12px;
		animation-duration: 15s;
		animation-delay: 4s;
	}

	.bubble:nth-child(9) {
		left: 25%;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.3);
		font-size: 12px;
		animation-duration: 12s;
		animation-delay: 2s;
	}

	.bubble:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes bubble {
		0% {
			opacity: 0.5;
			transform: translateY(0) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}

	@keyframes code {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>